<template>
  <div class="page-container">
    <pf-table
      ref="pfTable"
      v-model="form"
      :columns="columns"
      :form-items="formItems"
      @selection-change="handleSelectionChange"
      @get-table-data="getTableData"
    >
      <template #handle-area>
        <el-button type="primary" @click="addHandle">新增角色</el-button>
        <el-button type="danger" @click="bathDeleteHandle">删除</el-button>
      </template>
      <template #handle="{row}">
        <el-button type="text" size="small" @click="showDetail(row)">详情</el-button>
        <el-button type="text" size="small" @click="editHandle(row)">编辑</el-button>
        <el-button type="text" class="danger-text-button" size="small" @click="deleteHandle(row)">删除</el-button>
      </template>
    </pf-table>
    <AddRole
      v-if="showRole"
      :id="roleId"
      :type="type"
      @close="closeHandle"
      @confirm="confirmHandle"
    />
  </div>
</template>

<script>
import { getRoleList, deleteRole } from '@/api/system'
import AddRole from './AddRole.vue'

export default {
  name: 'RoleList',
  components: {
    AddRole
  },
  data() {
    return {
      type: 'add',
      showRole: false,
      form: {},
      loading: false,
      roleId: '',
      selectionList: []
    }
  },
  computed: {
    columns() {
      const attrs = { 'min-width': '150px' }
      return [
        { attrs: { type: 'selection', fixed: 'left' }},
        { label: '角色', prop: 'roleName', attrs },
        { label: '描述', prop: 'roleDesc', attrs },
        { label: '创建时间', prop: 'createTime', attrs },
        { label: '修改时间', prop: 'updateTime', attrs },
        { label: '操作', slot: 'handle', attrs: { width: '150px' }}
      ]
    },
    formItems() {
      return [
        {
          type: 'input',
          label: '角色',
          prop: 'roleName'
        }, {
          type: 'date',
          label: '创建时间',
          prop: 'dateRange',
          span: 8,
          attrs: {
            type: 'datetimerange'
          }
        }
      ]
    }
  },

  methods: {

    getTableData({ pageNo, pageSize, ...formQuery }, done) {
      this.loading = true
      const [createStartTime = '', createEndTime = ''] = formQuery?.dateRange || []
      const data = {
        pageNo,
        pageSize,
        createStartTime,
        createEndTime,
        ...formQuery
      }
      getRoleList(data).then(res => {
        this.loading = false
        done({ data: res.data || [], total: res.count || 0 })
      }).catch(() => {
        done({ data: [], total: 0 })
        this.loading = false
      })
    },

    // 选择
    handleSelectionChange(selection) {
      this.selectionList = selection
    },

    // 新增
    addHandle() {
      this.type = 'add'
      this.roleId = ''
      this.showRole = true
    },

    // 查看详情
    showDetail(row) {
      this.type = 'detail'
      this.roleId = row.id
      this.showRole = true
    },

    // 编辑
    editHandle(row) {
      this.type = 'edit'
      this.roleId = row.id
      this.showRole = true
    },

    // 删除
    deleteHandle(row) {
      this.roleId = row.id
      this.deleteRoleHandle([this.roleId])
    },

    // 批量删除
    bathDeleteHandle() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请先选择角色')
        return false
      }
      const idList = []
      this.selectionList.map(item => {
        idList.push(item.id)
      })
      this.deleteRoleHandle(idList)
    },

    // 删除操作
    deleteRoleHandle(idList) {
      const data = {
        idList
      }
      this.$confirm('确定删除该角色吗?', '提示', {
        type: 'warning'
      }).then(() => {
        deleteRole(data).then(() => {
          this.$message.success('删除成功')
          this.$refs.pfTable.getTableData()
        }).catch(() => {})
      }).catch(() => {})
    },

    // 关闭弹窗
    closeHandle() {
      this.showRole = false
    },

    // 确定
    confirmHandle() {
      this.$refs.pfTable.getTableData()
    }
  }
}
</script>

<style lang="scss" scoped></style>
